<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
         <script src="js/jquery.min.js"></script>
        <style>
            body,html{
                margin: 0;
                padding: 0;
                display: block;
                height: 100%;
                padding: 0;
                position: static;
                width: 100%;
                position: relative;
            }
            body {
                overflow: hidden;
                transition: opacity 400ms ease 0s;
            }
            #container{
                position:fixed;
                left: 0;
                right: 0;
                top: 0;
                bottom: 0;
                overflow: hidden;
                transition-duration:1s; 
            }
            #container section {
                height: 100%;
                widows: 100%;
                position: relative;
            }

            #container section .slide {
                background-size: cover;                
                height: 100%;                
                position: absolute;
                left: 0;
                right: 0;
                top: 0;
                bottom: 0;
                width: 100%;
                background-position: center center;
            }

            #container section .slide:nth-child(1){
                background-image: url("https://cdnssl.mediafire.com/images/backgrounds/newHome/sections/camera_couple.jpg");
            }
            #container section .slide:nth-child(2){
                background-image: url("https://cdnssl.mediafire.com/images/backgrounds/newHome/sections/dj.jpg");
            }
            #container section .slide:nth-child(3){
                background-image: url("https://cdnssl.mediafire.com/images/backgrounds/newHome/sections/girl_cafe.jpg");
            }
            #container section .slide:nth-child(4){
                background-image: url("https://cdnssl.mediafire.com/images/backgrounds/newHome/sections/camera_couple.jpg");
            }
            #container section .slide:nth-child(5){
                background-image: url("https://cdnssl.mediafire.com/images/backgrounds/newHome/sections/dj.jpg");
            }
            #container section .slide:nth-child(6){
                background-image: url("https://cdnssl.mediafire.com/images/backgrounds/newHome/sections/girl_cafe.jpg");
            }


			#upArrow, #downArrow {
			    background: white;
			    height: 20px;			    
			    opacity: 0.4;
			    position: fixed;
			    right: 40%;
			    left: 40%;			    
			    text-align: center;
			    transition-duration:1s;
			    display: none;
			}
			#downArrow {
			    bottom: 0;
			    border-radius:100px 100px 0 0;
			}
			#upArrow {
			   top: 0;	
			   border-radius: 0 0 100px 100px;	
			}
			#upArrow:hover, #downArrow:hover {
			    height: 50px;
			}
			#upArrow img{
				transform:rotate(180deg);
			}
			#upArrow img , #downArrow img{
				height: 10px;
				width:40px;
				transition-duration:1s;
			}		
			
			#upArrow:hover img, #downArrow:hover img{
				height: 48px;
				width:160px;
			}
        </style>
    </head>
    <body>
        <div id="container">
            <section>                
                <div  class="slide" style="">
                    1
                </div>
                <div class="slide" style="display: none">
                    2
                </div>
                <div class="slide" style="display: none">
                    3
                </div>
                <div class="slide" style="display: none">
                    4
                </div>
                <div class="slide" style="display: none">
                    5
                </div>
                <div class="slide" style="display: none">
                    6
                </div>
            </section>
           <section>                
                <div  class="slide" style="">
                    12
                </div>
                <div class="slide" style="display: none">
                    22
                </div>
                <div class="slide" style="display: none">
                    32
                </div>
                <div class="slide" style="display: none">
                    42
                </div>
                <div class="slide" style="display: none">
                    52
                </div>
                <div class="slide" style="display: none">
                    62
                </div>
            </section>
            
            <section>                
                <div  class="slide" style="">
                    13
                </div>
                <div class="slide" style="display: none">
                    23
                </div>
                <div class="slide" style="display: none">
                    33
                </div>
                <div class="slide" style="display: none">
                    43
                </div>
                <div class="slide" style="display: none">
                    53
                </div>
                <div class="slide" style="display: none">
                    63
                </div>
            </section>
             <section>                
                <div  class="slide" style="">
                    sfa
                </div>
                <div class="slide" style="display: none">
                   à
                </div>
                <div class="slide" style="display: none">
                   á
                </div>
                <div class="slide" style="display: none">
                    á
                </div>
                <div class="slide" style="display: none">
                    à
                </div>
                <div class="slide" style="display: none">
                    fa
                </div>
            </section>
            
            <div id="downArrow" onclick="container.down()">
            	<img alt="" src="https://cdnssl.mediafire.com/images/backgrounds/newHome/sections/downArrow.png">
            </div>
            <div id="upArrow" onclick="container.up()">
            	<img alt="" src="https://cdnssl.mediafire.com/images/backgrounds/newHome/sections/downArrow.png">
            </div>
            <script>
            	var interval;
            	var slideInterval;
            	var heightScreen;
            	var index=0;//index of section
            	function init(){
	            	var container = $("#container");
	            	var le=$(container).find('section').length;	   
	            	heightScreen=$("body")[0].offsetHeight;
	            	container[0].style.height = heightScreen*le+'px';	            	
	            	container[0].style.position='absolute';
	            	$('#container section').css('height',heightScreen+'');
	            	container[0].style.top = (-heightScreen*index)+'px';
            		
            	}
            	
            	window.onresize = function(event) {
            		init();            		
            	};
            	
            	function Section(sections){
            		var slides = $(sections).find('.slide');
            		if($(sections).find('.index').length==0){
            			$(slides[0]).addClass('index');
            		}
            		
            		var timeDelay = 5000;
            		var timeChange = 200;
            		var stepOpacity = 0.05;  
            		function slideChangeOpacity(slide1, slide2, opacity) {
                        slide1.style.opacity = 1 - opacity;
                        slide2.style.opacity = opacity;
                    }

                    function slideChangeDisplay(slide1, slide2) {
                        var opacity = 0;                                              
                        slide1.style.opacity = 1;
                        slide2.style.opacity = 0;
                        slide1.style.display = 'block';
                        slide2.style.display = 'block';

                        var interval = setInterval(function() {
                            opacity += stepOpacity;  
                            slideChangeOpacity(slide1, slide2, opacity);
                            if (opacity > 1) {
                                slide1.style.display = 'none';
                                slide1.style.opacity = null;
                                $(slide1).removeClass("index");
                                $(slide2).addClass("index");
                                clearInterval(interval);
                            }
                        }, timeChange * stepOpacity);
                    }
                    
                    function getIndex(slides){
                    	for(var i =0;i<slides.length;i++){
                    		if($(slides[i]).attr('class').indexOf('index')>0){
                    			return i;
                    		}
                    	}
                    	return -1;                    	
                    }
                    this.slideChangeDisplayLoop = function(){
                    	slides = $(sections).find('.slide');
                    	var length = slides.length;                    	
                    	if(length>2){
                    		var i= getIndex(slides);                		
                    		slideInterval = window.setInterval(function() {
                    			var slide1 = slides[i%length];
                        		var slide2 = slides[(i+1)%length];
                            	slideChangeDisplay(slide1, slide2);
    							i++;                       	
                            }, timeDelay + timeChange);
                    		
                    	}
                    }
            	}
                
            	var Container = function(container){
            		var sections = $(container).find('section');            		            		
            		var maxIndex = sections.length-1; 
            		var minIndex = 0; 
            		
            		var startSlide = function(index){
            			var section = new Section(sections[index]);
        				section.slideChangeDisplayLoop();      				
            		}
            		
            		startSlide(0);
            		if(maxIndex > minIndex){
    					$("#downArrow").css('display', 'block');
    				}
            		
            		function move(downOrUp){
            			clearInterval(interval);
            			clearInterval(slideInterval);
            			$("#downArrow").css('display', 'none');
            			$("#upArrow").css('display', 'none');
            			if((downOrUp>0 && index < maxIndex) || (downOrUp<0 && index > minIndex)){              				
            				index += downOrUp;            				
            				container[0].style.top = (-heightScreen*index)+'px';
            				startSlide(index);            				
            				if(index > minIndex){
            					$("#upArrow").css('display', 'block');
            				}
            				if(index < maxIndex){
            					$("#downArrow").css('display', 'block');
            				}
            			}
            		}
            		
            		this.down = function(){
            			move(1);
            		}
            		this.up = function(){
            			move(-1)
            		}
            		
            		
            		
            	}
            	init();
            	var container1 = $("#container");
            	var container = new Container(container1);
                //var sections = $("#container section");
                //var section = new Section(sections[0]);
                //section.slideChangeDisplayLoop();
                               
                //slideChangeDisplay($(slides)[0], $(slides)[1]);

            </script>

        </div>
    </body>
</html>
